import { Button, Input } from "antd";
import styles from "./index.module.less";
import { useState } from "react";

const ProblemPlayground = ({
  input,
  input2,
  title,
  func,
}: {
  input?: any;
  input2?: any;
  title: string;
  func: any;
}) => {
  const [inputContent, setInputContent] = useState<string>(
    input !== undefined ? JSON.stringify(input) : ""
  );
  const [inputContent2, setInputContent2] = useState<string>(
    input !== undefined ? JSON.stringify(input2) : ""
  );
  const [outputContent, setOutputContent] = useState<any>();

  const solveProblem = () => {
    let input;
    let input2;
    try {
      input = JSON.parse(inputContent?.trim() as string);
    } catch {
      input = inputContent;
    }
    try {
      input2 = JSON.parse(inputContent2?.trim() as string);
    } catch {
      input2 = inputContent2;
    }
    console.log(input2);

    if (input !== undefined) {
      console.log(input);

      if (input2 !== undefined) {
        setOutputContent(func(input, input2));
      } else {
        setOutputContent(func(input));
      }
    }
  };

  return (
    <div className={styles.problemItem}>
      <div className={styles.title}>{title}</div>
      <Input
        className={styles.input}
        value={inputContent}
        onChange={(e) => setInputContent(e.target.value)}
      />
      {input2 !== undefined && (
        <Input
          className={styles.input}
          value={inputContent2}
          onChange={(e) => setInputContent2(e.target.value)}
        />
      )}
      <Button type="primary" onClick={() => solveProblem()}>
        Done
      </Button>
      <div className={styles.display}>
        <div>Input: {inputContent}</div>
        <span>{"=>"}</span>
        <div>Output: {outputContent}</div>
      </div>
    </div>
  );
};

export default ProblemPlayground;
